<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="p-2 task_execution_monitoring">
    <el-card shadow="hover" style="margin-bottom: 10px">
      <el-form :inline="true" size="small" label-width="80px">
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable />
        </el-form-item>
        <el-form-item label="来源日期">
          <el-date-picker
            v-model="dateRangeCreateTime"
            style="width: 240px"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" @click="doQuery">查询</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="hover">
      <el-tabs v-model="activeName" @tab-change="handleTabChange">
        <el-tab-pane label="实时任务" name="实时任务">
          <el-table :data="metaList" v-loading="loading">
            <el-table-column label="任务ID" align="center" prop="taskId" show-overflow-tooltip fixed="left" />
            <el-table-column label="任务名称" align="center" prop="taskName" show-overflow-tooltip />
            <el-table-column label="任务描述" align="center" width="280" prop="taskDescription" show-overflow-tooltip />
            <el-table-column label="启动时间" align="center" prop="triggerTime" show-overflow-tooltip />
            <el-table-column label="状态" align="center" show-overflow-tooltip>
              <template #default="scope">
                {{ statusMap[scope.row.status] }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right">
              <template #default="scope">
                <el-button size="small" link type="primary" icon="View" @click="view(scope.row)">查看日志</el-button>
                <el-button v-if="[1].includes(scope.row.status)" size="small" link type="primary" @click="suspend(scope.row)"> 中止 </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="离线任务" name="离线任务">
          <el-table :data="metaList" v-loading="loading">
            <el-table-column label="任务ID" align="center" prop="taskId" show-overflow-tooltip fixed="left" />
            <el-table-column label="任务名称" align="center" prop="taskName" show-overflow-tooltip />
            <el-table-column label="任务描述" align="center" prop="taskDescription" show-overflow-tooltip />
            <el-table-column label="预计执行时间" align="center" width="150" prop="triggerTime" show-overflow-tooltip />
            <el-table-column label="实际执行开始时间" align="center" width="150" prop="startTime" show-overflow-tooltip />
            <el-table-column label="实际执行结束时间" align="center" width="150" prop="endTime" show-overflow-tooltip />
            <el-table-column label="状态" align="center" show-overflow-tooltip>
              <template #default="scope">
                {{ statusMap[scope.row.status] }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="210" fixed="right">
              <template #default="scope">
                <el-button size="small" link type="primary" icon="View" @click="view(scope.row)">查看日志</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <div class="pagenation">
      <el-pagination
        v-show="total > 0"
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="queryParams.pageSize"
        :current-page="queryParams.pageNum"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <ViewLog v-if="DialogVisible" :DialogVisible="DialogVisible" :taskId="taskId" @handleEvent="handleEvent" />
</template>

<script setup>
import { getTaskMonitoringList, suspendTask } from '@/api/dataIntegration/dataSync';
import ViewLog from './component/ViewLog.vue';
const total = ref(0);
const loading = ref(false);
const DialogVisible = ref(false);
const taskId = ref('');
const metaList = ref([]);
const dateRangeCreateTime = ref(['', '']);
const activeName = ref('实时任务');
const syncType = ref('REAL_TIME_SYNC');

// 日志查看功能实现
const view = (data) => {
  DialogVisible.value = true;
  taskId.value = data.taskId;
};

const handleEvent = () => {
  DialogVisible.value = false;
};

// 状态映射
const statusMap = {
  1: '运行中',
  2: '同步成功',
  3: '同步失败',
  4: '未调度',
  5: '调度中',
  6: '调度成功',
  7: '调度失败',
  8: '已中止'
};

// tab切换功能实现
const handleTabChange = (newTab) => {
  activeName.value = newTab;
  syncType.value = newTab === '实时任务' ? 'REAL_TIME_SYNC' : 'OFFLINE_SYNC';
  getList();
};

// 中止任务功能实现
const suspend = (data) => {
  const taskInfo = {
    taskId: data.taskId
  };
  suspendTask(taskInfo).then((res) => {
    if (res.code === 200) {
      getList();
    }
  });
};

// 分页功能实现
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  triggerStartTime: '',
  triggerEndTime: '',
  isAsc: 'descending',
  syncType: '',
  taskName: ''
});

const handleCurrentChange = (num) => {
  queryParams.value.pageNum = num;
  getList();
};

// 查询功能实现
const doQuery = () => {
  getList();
};

// 重置功能实现
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    triggerStartTime: '',
    triggerEndTime: '',
    isAsc: 'descending',
    syncType: '',
    taskName: ''
  };
  dateRangeCreateTime.value = ['', ''];
  getList();
};

console.log(dateRangeCreateTime.value);

// 获取列表数据
const getList = () => {
  loading.value = true;
  queryParams.value.triggerStartTime = dateRangeCreateTime.value[0];
  queryParams.value.triggerEndTime = dateRangeCreateTime.value[1];
  queryParams.value.syncType = syncType.value;
  getTaskMonitoringList(queryParams.value)
    .then((res) => {
      if (res) {
        metaList.value = res?.rows || [];
        loading.value = false;
        total.value = res?.total || 0;
      }
    })
    .catch(() => {
      metaList.value = [];
    });
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.task_execution_monitoring {
  height: calc(100vh - 84px);
  overflow: auto;
}

.pagenation {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}
</style>